.right_frame {
  position: fixed;
  top: 20%;
  right: 0;
  width: 60px;
  border-radius: 8px;
  z-index: 98;
  // background-color: #fff;
  list-style: none;
  li {
    position: relative;
    height: 60px;
    border-bottom: 1px solid #eee;
    background-image: url(../assets/fixed.png);
    background-position: top left;
    background-color: #fff;
    cursor: pointer;
    a {
      display: block;
    }
    transition:  background-position .5s;
  }
  .qq {
    border-radius: 6px 0 0 0;
    background-position: 240px 60px;
    a {
      width: 100%;
      height: 100%;
    }
    &:hover {
      background-position: 240px 0;
      background-color: #00a0e9;
    }
  }
  .wechat {
    background-position: 180px 60px;
    &:hover {
      background-position: 180px 0;
      background-color: #00a0e9;
      a {
        display: block;
      }
    }
    a {
      position: absolute;
      top: -35px;
      left: -135px;
      display: none;
      width: 130px;
      height: 130px;
      background-image: url(../assets/qrcode.jpg);
      background-size: cover;
    }
  }
  .phone {
    border-radius: 0 0 0 6px;
    background-position: 120px 60px;
    &:hover {
      background-position: 120px 0;
      background-color: #00a0e9;
      a {
        display: block;
      }
    }
    a {
      position: absolute;
      top: 15px;
      left: -155px;
      display: none;
      width: 150px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      border-radius: 6px;
      background-color: #fff;
    }
  }
}